<template>
  <div>
    <el-dialog v-model="showRoleUser" title="修改用户分组" width="40%">
      <el-form
        :model="form"
        label-width="80px"
        status-icon
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="用户名称">
          {{ scope.row.username }}
        </el-form-item>
        <el-form-item label="用户权限">
          {{ scope.row.role_name }}
        </el-form-item>
        <el-form-item label="重新分组" prop="rid">
          <el-select
            v-model="form.rid"
            placeholder="请选择分组"
            autocomplete="off"
          >
            <el-option
              :label="item.roleName"
              :value="item.id"
              v-for="item in roleList"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onsubmit(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
    
    <script setup>
import { defineProps, computed, defineEmits, reactive } from "vue";
import { rolesUserList, roleUserList } from "@/api/userList";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  showRoleUser: {
    type: Boolean,
    default: false,
  },
  getList: {
    type: Function,
  },
  tableScope: {
    type: Object,
  },
});
const emit = defineEmits(["update:showRoleUser"]);
let ruleFormRef = reactive({});
let roleList = reactive([]);
const getroleList = async () => {
  let res = await rolesUserList();
  roleList.push(...res.data);
};
getroleList();

let rules = {
  rid: [{ required: true, message: "选择分组", trigger: "blur" }],
};
const form = reactive({
  rid: "",
});
let showRoleUser = computed({
  get() {
    return props.showRoleUser;
  },
  set(newv) {
    emit("update:showRoleUser", newv);
  },
});
let scope = computed(() => {
  return props.tableScope;
});
const closeDialog = (ruleFormRef = null) => {
  if (ruleFormRef != null) ruleFormRef.resetFields();
  emit("update:showRoleUser", false);
};
const onsubmit = (ruleFormRef) => {
  ruleFormRef.validate(async (isValid) => {
    if (isValid) {
      let res = await roleUserList(Number(scope.value.row.id), {
        rid: form.rid,
      });
      ElMessageBox.alert(res.meta.msg, "", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: () => {
          let ls = res.meta.status >= 200 && res.meta.status < 300;
          ElMessage({
            type: ls ? "success" : "error",
            message: ls ? "修改成功" : "修改失败",
          });
        },
      });
      ruleFormRef.resetFields();
      props.getList();
    }

    closeDialog();
  });
};
</script>
    
    <style lang="scss" scoped>
.el-dialog {
  padding: 100px;
}
</style>